<template>
	<view class="income">
		<view class="nav_bar" style="background: linear-gradient( 179deg, #D5BBFF 0%, #E7DBFD 100%);">
			<uni-nav-bar color="#333" right-text="账户" left-icon="left" title="收益" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"
				@clickRight="$util.toUrl('/pages/store/income/account')"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="card">
			<view class="top">
				<text>总收益(元)</text>
				<view>{{all_price}}</view>
			</view>

			<view class="bottom flex_r_between">
				<view class="left">
					<text>当前可提现(元)</text>
					<view>{{current_bill}}</view>
				</view>
				<!-- <view class="right" @click="$util.toUrl('/pages/guild/income/withdrawal?auth=3')">
					提现
				</view> -->
			</view>

		</view>

		<view class="container">
			<view class="container_title">流水记录</view>

			<view v-for="(item,index) in list" :key="index">
				
				<view class="container_header" v-if="showMonth(index)" style="margin-top: 20rpx;">
					<view class="top">{{getMonth(item)}}月</view>

					<view class="bottom flex_center">
						<view>收入 {{getPrice(item)}}</view>
						<view>提现 {{getWithdraw(item)}}</view>
					</view>
				</view>

				<view class="list_item">
					<view class="top flex_r_between">
						<text>{{item.order_type == 4 ? `提现${item.price}元` : item.remark}}</text>
						<view>
							{{Number(item.price).toFixed(2)}}
						</view>
					</view>
					<view class="bottom flex_r_between">
						<text>{{item.create_time}}</text>
						<view :id="item.status == 3 ? 'success' : ''" v-if="item.order_type == 4">{{
							item.status == 3 ? '已打款'
							: item.status == 4 ? '未通过'
							: '审核中'
						}}</view>
					</view>

					<view class="remark" v-if="item.order_type == 4 && item.status == 4">原因：{{item.remark}}</view>
				</view>
				
			</view>
			
			<view style="background: #FFF;" v-if="!list.length">
				<empty></empty>
			</view>

		</view>

		<u-loadmore status="loading" v-if="total > list.length && total != 0" />

	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				page: 1,
				total: 1,
				list: [],
				month: [],

				current_bill: '0.00',
				all_price: '0.00',
				
				circle_id: 0,
				
			}
		},
		methods: {
			getList() {
				this.$get('/guild_data/getBillLog', {
					day_type: 2,
					auth: 3,
					page: this.page,
					circle_id: this.circle_id
				}).then(res => {
					this.total = res.data.log.total;
					this.current_bill = Number(res.data.current_bill).toFixed(2);
					this.all_price = Number(res.data.price).toFixed(2);
					this.list.push(...res.data.log.data);
					this.month = res.data.month;
				})
			},

			showMonth(index) {
				if (index == 0) {
					return true;
				} else {
					var now = new Date(this.list[index].create_time);
					var pre = new Date(this.list[index - 1].create_time);

					var nowYear = now.getFullYear();
					var nowMonth = now.getMonth();

					var preYear = pre.getFullYear();
					var preMonth = pre.getMonth();
					if (nowYear == preYear && nowMonth == preMonth) {
						return false;
					} else {
						return true;
					}
				}
			},

			getMonth(item) {
				var now = new Date(item.create_time);
				return now.getMonth() + 1;
			},

			getPrice(item) {
				var now = new Date(item.create_time);
				var nowTime = `${now.getFullYear()}-${(now.getMonth()+1) < 10 ? `0${now.getMonth()+1}` : now.getMonth()+1}`;

				var price = '0.00';
				
				this.month.forEach((element) => {
					if (element.time == nowTime) {
						price = element.price;
					}
				});

				return Number(price).toFixed(2);
			},

			getWithdraw(item) {
				var now = new Date(item.create_time);
				var nowTime = `${now.getFullYear()}-${(now.getMonth()+1) < 10 ? `0${now.getMonth()+1}` : now.getMonth()+1}`;

				var withdraw = '0.00';
				this.month.forEach((element) => {
					if (element.time == nowTime) {
						withdraw = element.withdraw;
					}
				});

				return Number(withdraw).toFixed(2);
			},
		},

		onLoad(option) {
			this.circle_id = option.circle_id;
		},
		
		onShow(){
			this.list = [];
			this.page = 1;
			this.getList();
		},

		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getList();
			}
		}
	}
</script>

<style lang="less" scoped>
	.income {
		min-height: 100vh;
		padding: 16rpx 32rpx 32rpx;
		background: linear-gradient(179deg, #D5BBFF 0%, #E7DBFD 16%, #F2F2F5 100%);
	}

	.card {
		width: 686rpx;
		background: linear-gradient(41deg, #E470FF 0%, #F3D7FF 100%), linear-gradient(41deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.62) 100%);
		box-shadow: inset 0rpx -8rpx 0rpx 0rpx #EA9FFF;
		border-radius: 32rpx;

		padding: 40rpx 24rpx;

		.top {

			padding-bottom: 30rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);

			text {
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 32rpx;
			}

			view {
				font-weight: 600;
				font-size: 56rpx;
				color: #FFFFFF;
			}

		}

		.bottom {
			.left {
				text {
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 32rpx;
				}

				view {
					font-weight: 600;
					font-size: 40rpx;
					color: #FFFFFF;
				}
			}

			.right {
				width: 128rpx;
				height: 48rpx;
				background: #D870F0;
				border-radius: 24rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
			}
		}

	}

	.container {
		.container_title {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			margin: 24rpx 0;
		}

		.container_header {
			height: 192rpx;
			padding: 40rpx 24rpx;
			background: url('https://qiniu-cdn.maeiyun.com//h5static/guild/income_header.png');
			background-size: 100%;
			background-color: #FFF;
			border-radius: 12rpx 12rpx 0 0;
			overflow: hidden;


			.top {
				font-weight: bold;
				font-size: 48rpx;
				color: #131313;
				line-height: 72rpx;
			}

			.bottom {
				view {
					flex: 1;
					font-size: 32rpx;
					color: #333333;
				}
			}

		}

		.list_item {
			padding: 32rpx 24rpx;
			background: #FFF;

			.top {
				margin-bottom: 12rpx;

				text {
					font-size: 32rpx;
					color: #333333;
				}

				view {
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.bottom {
				
				text {
					font-size: 24rpx;
					color: #999999;
					line-height: 32rpx;
				}

				view {
					width: 96rpx;
					height: 32rpx;
					background: #FFEAEE;
					border-radius: 16rpx;
					line-height: 32rpx;
					font-size: 24rpx;
					color: #FD2A53;
					text-align: center;
				}

				#success {
					background: #E5FFE9;
					color: #10A927;
				}
				
			}

			.remark {
				margin-top: 18rpx;
				font-size: 24rpx;
				color: #FD2A53;
				line-height: 34rpx;
			}
		}

	}
</style>